<template>
  <pre
    :contenteditable="contenteditable"
    @blur.native="handleBlur"
    ref="preRef"
  ><code style="background: transparent" :class="`hljs ${language}`" v-html="highlightedCode"></code></pre>
</template>

<script setup lang="ts" name="codeView">
import "highlight.js/styles/stackoverflow-dark.css"; // 导入样式
import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";
import css from "highlight.js/lib/languages/css";
import xml from "highlight.js/lib/languages/xml";
const preRef = ref<HTMLPreElement>();
const props = withDefaults(
  defineProps<{
    code: string;
    language: string;
    color?: string;
    contenteditable?: boolean;
  }>(),
  {
    color: "",
    contenteditable: true
  }
);
const codeOptions: Record<string, string> = {
  Vue: "vue",
  React: "javascript",
  Scss: "scss",
  Js: "javascript",
  Ts: "javascript",
  HTML: "vue",
  vite: "javascript"
};
const highlightedCode = computed((): string => {
  const result = hljs.highlight(props.code, {
    language: codeOptions[props.language],
    ignoreIllegals: true
  });
  return result.value;
});
const init = () => {
  hljs.registerLanguage("scss", css);
  hljs.registerLanguage("javascript", javascript);
  hljs.registerLanguage("vue", xml);
};
init();
const handleBlur = (e: FocusEvent) => {};
</script>

<style></style>
